<form [formGroup]="form">
  <ix-fieldset>
    <div class="direction-mode">
      @if (form.controls.direction.enabled) {
        <ix-select
          formControlName="direction"
          [label]="helptext.directionLabel | translate"
          [tooltip]="helptext.directionTooltip | translate"
          [required]="true"
          [options]="directionOptions$"
        ></ix-select>
      }
      @if (form.controls.transfer_mode.enabled) {
        <ix-select
          formControlName="transfer_mode"
          [label]="helptext.transferModeLabel | translate"
          [tooltip]="transferModeTooltip | translate"
          [required]="true"
          [options]="transferModeOptions$"
        ></ix-select>
      }
      <ix-transfer-mode-explanation
        [mode]="form.controls.transfer_mode.value"
      ></ix-transfer-mode-explanation>
    </div>
    <div class="cloudsync">
      @if (form.controls.path_destination.enabled) {
        <ix-explorer
          formControlName="path_destination"
          [label]="helptext.pathLabel | translate"
          [tooltip]="helptext.pathTooltip | translate"
          [required]="true"
          [nodeProvider]="fileNodeProvider"
        ></ix-explorer>
      }
      @if (form.controls.path_source.enabled) {
        <ix-explorer
          formControlName="path_source"
          [label]="helptext.pathLabel | translate"
          [tooltip]="helptext.pathTooltip | translate"
          [required]="true"
          [multiple]="true"
          [nodeProvider]="fileNodeProvider"
        ></ix-explorer>
      }
      @if (form.controls.folder_destination.enabled) {
        <ix-explorer
          formControlName="folder_destination"
          [rootNodes]="[slashRootNode]"
          [label]="helptext.folderLabel | translate"
          [tooltip]="helptext.folderTooltip | translate"
          [nodeProvider]="bucketNodeProvider"
        ></ix-explorer>
      }
      @if (form.controls.folder_source.enabled) {
        <ix-explorer
          formControlName="folder_source"
          [rootNodes]="[slashRootNode]"
          [label]="helptext.folderLabel | translate"
          [tooltip]="helptext.folderTooltip | translate"
          [multiple]="true"
          [nodeProvider]="bucketNodeProvider"
        ></ix-explorer>
      }
    </div>
    @if (form.controls.description.enabled) {
      <ix-input
        formControlName="description"
        [label]="helptext.descriptionLabel | translate"
        [required]="true"
      ></ix-input>
    }
    @if (form.controls.bucket.enabled) {
      <ix-select
        formControlName="bucket"
        [label]="bucketPlaceholder | translate"
        [tooltip]="bucketTooltip | translate"
        [options]="bucketOptions$"
      ></ix-select>
    }
    @if (form.controls.bucket_input.enabled) {
      <ix-input
        formControlName="bucket_input"
        [label]="helptext.bucketLabel | translate"
        [tooltip]="helptext.bucketInputTooltip | translate"
        [required]="true"
      ></ix-input>
    }
    <ix-scheduler
      formControlName="cloudsync_picker"
      [label]="helptext.scheduleLabel | translate"
      [required]="true"
    ></ix-scheduler>
  </ix-fieldset>

  <ix-form-actions>
    <button
      mat-button
      matStepperPrevious
      ixTest="back"
    >{{ 'Back' | translate }}</button>
    <button
      *ixRequiresRoles="requiredRoles"
      mat-button
      type="button"
      color="primary"
      ixTest="save"
      [disabled]="form.invalid"
      (click)="onSave()"
    >{{ 'Save' | translate }}</button>
    <button
      mat-button
      type="button"
      ixTest="advanced"
      (click)="openAdvanced()"
    >{{ 'Advanced Options' | translate }}</button>
  </ix-form-actions>
</form>
